<template>
  <div>
    <span style="display: flex; width: 100%;">
      <el-input v-model="lineId" type="number" style="max-width: 400px;margin-left: 10px;" placeholder="Please input"
        class="input-with-select">
        <template #prepend>
          <h5>流水线编号</h5>
        </template>
        <template #append>
          <el-button :icon="Search" @click="updateData" />
        </template>
      </el-input>
      <el-input  v-model="orderItemId" type="number" style="max-width: 400px;margin-left: 10px;" placeholder="Please input"
        class="input-with-select">
        <template #prepend>
          <h5>订单项编号</h5>
        </template>
        <template #append>
          <el-button :icon="Search" @click="updateData" />
        </template>
      </el-input>
      <el-text style="margin-left: 10px;" class="mx-1" type="primary">时间排序方式：</el-text>
      <el-radio-group @change="updateData" v-model="timeOrderBy">
        <el-radio :value="1">降序</el-radio>
        <el-radio :value="0">升序</el-radio>
      </el-radio-group>
    </span>
    <el-table style="margin-top:10px;" border :data="tableData" max-height="80vh" width="100vw">
      <el-table-column prop="defectLogId" label="缺陷编号" width="120" />
      <el-table-column  label="缺陷图" width="120" >
        <template #default="scope">
          <!-- <img :="scope.row.pig"> -->
          <!-- <el-avatar shape="square" :size="100" fit="cover" :src="scope.row.pig" /> -->
          <el-image style="width: 100px; height: 100px" :src="scope.row.pig" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column prop="lineId" label="流水线编号" width="120" />
      <el-table-column prop="orderItemId" label="订单项编号" width="120" />
      <el-table-column label="创建时间" width="200">
        <template #default="scope">
          {{ GetDateTime(scope.row.creationTime) }}
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; margin-top: 10px;">
      <el-pagination style="margin: auto; width: 600px;" v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[5, 10, 50, 100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { getAllDefectlog } from "../../request/apis/DefectLogApi";
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from "element-plus";
import { GetDateTime } from "../../utils/storage"
onBeforeMount(() => {
  updateData()
})


const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const tableData = ref([])
const lineId = ref()
const timeOrderBy = ref(1)
const orderItemId = ref()


const updateData = () => {//刷新数据

  getAllDefectlog(
    pageSize.value,
    currentPage.value,
    lineId.value,
    orderItemId.value,
    timeOrderBy.value).then((res) => {
      if (res.data == null) return
      tableData.value = res.data.list
      currentPage.value = res.data.currPage
      totalCount.value = res.data.totalCount
      console.log(tableData.value )
    })
}
const handleSizeChange = (val: number) => {
  updateData()
}
const handleCurrentChange = (val: number) => {
  updateData()
}

</script>

<style></style>
